<template>
  <div class="wrapper">
    <swiper :options="swiperOptions">
      <swiper-slide v-for="(page,index) in pages" :key="index">
        <div class="icons">
          <div class="icon" v-for="item in page" :key="item.id">
            <div class="icon-img">
              <img :src="item.imgUrl" />
            </div>
            <span>{{item.title}}</span>
          </div>
        </div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
  <!-- <div class="icon">
      <div class="icon-img">
        <img src="//s.qunarzz.com/homenode/images/touchheader/train.png">
      </div>
      <span>度假</span>
    </div>
    <div class="icon">
      <div class="icon-img">
        <img  src="//s.qunarzz.com/homenode/images/touchheader/flight.png" />
      </div>
      <span>度假</span>
    </div>
    <div class="icon">
      <div class="icon-img">
        <img  src="//s.qunarzz.com/homenode/images/touchheader/piao.png" />
      </div>
      <span>度假</span>
    </div>
    <div class="icon">
      <div class="icon-img">
        <img  src="//s.qunarzz.com/homenode/images/touchheader/package.png" />
      </div>
      <span>度假</span>
    </div>
    <div class="icon">
      <div class="icon-img">
        <img src="//s.qunarzz.com/homenode/images/touchheader/train.png">
      </div>
      <span>度假</span>
    </div>
    <div class="icon">
      <div class="icon-img">
        <img  src="//s.qunarzz.com/homenode/images/touchheader/flight.png" />
      </div>
      <span>度假</span>
    </div>
    <div class="icon">
      <div class="icon-img">
        <img  src="//s.qunarzz.com/homenode/images/touchheader/piao.png" />
      </div>
      <span>度假</span>
  </div>-->
</template>

<script>
export default {
  name: "icons",
  props: ["iconslist"],
  data() {
    return {
      swiperOptions: {
        pagination: ".swiper-pagination",
        loop: true,
        observer: true,
        observeParents: true,
        // Some Swiper option/callback...
      },
    };
  },
  computed: {
    pages() {
      const pages = [];
      this.iconslist.forEach((item, index) => {
        const page = Math.floor(index / 8);
        if (!pages[page]) {
          pages[page] = [];
        }
        pages[page].push(item);
      });
      return pages;
    },
  },
};
</script>

<style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-active
  background-color #777

.icons
  display flex
  flex-wrap wrap
  // justify-content: space-around
  width 100%
  height 3.6rem

  .icon
    display flex
    flex-direction column
    overflow hidden
    width 25%
    height 1.8rem

    // background-color blue
    .icon-img
      margin 0.3rem 0.4rem 0.1rem 0.4rem
      flex-shrink 0
      width 1rem
      height 1rem

      // background-color red
      img
        width 100%
        height 100%

    span
      height 0.4rem
      line-height 0.4rem
      font-size 0.28rem
      color #888
</style>